import React, {Component} from 'react';
import {View, Text, Image, TouchableOpacity, ScrollView,Modal} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import {NavigationContext} from '@react-navigation/native';
import {pxToDp} from "../../../../utils/styleKits";
import icon from "../../../../utils/icon.js";
import Header from "../../../../components/header";

// 我的动态页面
class Trend extends Component {
  static contextType = NavigationContext;

  constructor(props){
    super(props);
  }

  timeId = 0; //定时器
  state = {
    // 列表数据
    listData: [
      {
        headUrl: 'https://www.itying.com/images/flutter/list2.jpg',
        content: `陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。
          蛛丝儿结满雕梁，绿纱今又糊在蓬窗上。说什么脂正浓，粉正香，如何两鬓又成霜？`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list1.jpg'},
          {url: 'https://www.itying.com/images/flutter/list2.jpg'},
        ],
        distance: 0,
        login: 6,
        star: 0,
        like: 1,
      },
      {
        headUrl: 'https://www.itying.com/images/flutter/list2.jpg',
        content: `因嫌纱帽小，致使锁枷扛，昨怜破袄寒，今嫌紫蟒长。
          乱烘烘你方唱罢我登场，反认他乡是故乡。甚荒唐，到头来都是为他人作嫁衣裳！`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list3.jpg'},
          {url: 'https://www.itying.com/images/flutter/list4.jpg'},
        ],
        distance: 4,
        login: 1,
      },
      {
        headUrl: 'https://www.itying.com/images/flutter/list2.jpg',
        content: `陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。
          蛛丝儿结满雕梁，绿纱今又糊在蓬窗上。说什么脂正浓，粉正香，如何两鬓又成霜？
          昨日黄土陇头送白骨，今宵红灯帐底卧鸳鸯。
          金满箱，银满箱，转眼乞丐人皆谤。
          正叹他人命不长，那知自己归来丧！`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list5.jpg'},
        ],
        distance: 8,
        login: 3,
      },
      {
        headUrl: 'https://www.itying.com/images/flutter/list2.jpg',
        content: `陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。
          乱烘烘你方唱罢我登场，反认他乡是故乡。甚荒唐，到头来都是为他人作嫁衣裳！`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list6.jpg'},
          {url: 'https://www.itying.com/images/flutter/list7.jpg'},
          {url: 'https://www.itying.com/images/flutter/list8.jpg'},
        ],
        distance: 2,
        login: 1,
      },
    ],
    isLoading: false,
    // 放大图片
    zoomImages: [
      {
        url: '',
      },
    ],
    zoomVisible: false,
    zoomIndex: 0
  };

  componentWillUnmount(): void {
    clearTimeout(this.timeId)
  }

  render() {
    let {listData, isLoading, zoomImages, zoomVisible, zoomIndex} = this.state;
    return (
      <View style={{position:'relative'}}>
        <Header title={'我的动态'} leftTitle={''}/>

        {/*滚动区域*/}
        <ScrollView onMomentumScrollEnd={this.scrollEnd}>
          {
            listData.map((item, i) => {
              return <View key={i} style={{
                borderBottomColor: '#ddd', borderBottomWidth: pxToDp(1),
                padding: pxToDp(10)
              }}>
                {/*个人信息*/}
                <View style={{flexDirection: 'row',justifyContent:'space-between',alignItems:'center'}}>
                  <View style={{flexDirection: 'row'}}>
                    <Image source={{uri: item.headUrl}} style={{
                      width: pxToDp(50),
                      height: pxToDp(50), borderRadius: pxToDp(25), marginRight: pxToDp(10)
                    }}/>
                    <View style={{justifyContent: 'space-between'}}>
                      <Text style>
                        一叶知秋 <Text style={{fontFamily: 'iconfont', color: '#ff422c'}}>{icon.icontanhuanv}</Text> 23岁
                      </Text>
                      <Text>单身 | 本科 | 年龄相仿</Text>
                    </View>
                  </View>
                </View>

                {/*内容*/}
                <TouchableOpacity onPress={this.numberOfLines.bind(this, i)}>
                  <Text numberOfLines={item.numberOfLines === undefined ? 2 : null} style={{marginTop: pxToDp(20), marginBottom: pxToDp(20)}}>
                    {item.content}
                  </Text>
                </TouchableOpacity>

                {/*图片*/}
                <View style={{flexDirection: 'row'}}>
                  {
                    item.imgs.map((item2,ii) => {
                      return <TouchableOpacity key={ii} onPress={this.zoomImg.bind(this, i, ii)}>
                        <Image source={{uri: item2.url}} style={{
                          width: pxToDp(70), height: pxToDp(70),
                          marginRight: pxToDp(10)
                        }}/>
                      </TouchableOpacity>
                    })
                  }
                </View>

                {/*距离、登录时间*/}
                <Text style={{marginTop: pxToDp(10), color:'#aaa', fontSize: pxToDp(12)}}>距离 {item.distance} km   {item.login} 个月前</Text>

                <View style={{flexDirection:'row',justifyContent:'space-between',
                  marginTop:pxToDp(10),marginBottom:pxToDp(10)}}>
                  <TouchableOpacity onPress={this.handleStar.bind(this, i)}>
                    <Text style={{fontFamily:'iconfont',color: item.isStar ? 'red' : '#aaa'}}>{icon["icondianzan-o"]}{item.star}</Text>
                  </TouchableOpacity>
                  <TouchableOpacity onPress={()=>console.log(this.context.navigate('comments'))}>
                    <Text style={{fontFamily:'iconfont',color:'#aaa'}}>{icon.iconpinglun}0</Text>
                  </TouchableOpacity>
                  <TouchableOpacity/>
                </View>
              </View>
            })
          }
          <View style={{justifyContent:'center',alignItems:'center', margin: pxToDp(20)}}>
            <Text>{isLoading? '正在加载中...':'已加载完毕！'}</Text>
          </View>
        </ScrollView>

        {/*图片放大*/}
        <Modal visible={zoomVisible} transparent={true} onRequestClose={()=>this.setState({zoomVisible: false})}>
          <ImageViewer imageUrls={zoomImages} index={zoomIndex} onClick={()=>this.setState({zoomVisible: false})}/>
        </Modal>
      </View>
    );
  };

  // 是否展开内容
  numberOfLines = (i) => {
    let {listData} = this.state;
    if (listData[i].numberOfLines === undefined){
      listData[i].numberOfLines = null
    } else {
      listData[i].numberOfLines = undefined
    }
    this.setState({
      listData
    })
  }

  // 放大图片
  zoomImg = (i, ii) => {
    let {listData} = this.state;
    let zoomImages = listData[i].imgs;
    this.setState({
      zoomImages,
      zoomVisible: true,
      zoomIndex: ii
    })
  };

  // 点赞
  handleStar = (i) => {
    let {listData} = this.state;
    listData.forEach((item,index)=>{
      if (index === i && item.isStar){
        item.star--;
        item.isStar = false
      } else if (index === i && !item.isStar) {
        item.star++;
        item.isStar = true
      }
    });
    this.setState({
      listData
    })
  };

  scrollEnd = (e) => {
    let {listData, isLoading} = this.state;

    let addData = [
      {
        headUrl: 'https://www.itying.com/images/flutter/list1.jpg',
        content: `陋室空堂，当年笏满床；衰草枯杨，曾为歌舞场。
          蛛丝儿结满雕梁，绿纱今又糊在蓬窗上。说什么脂正浓，粉正香，如何两鬓又成霜？`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list1.jpg'},
          {url: 'https://www.itying.com/images/flutter/list2.jpg'},
        ],
        distance: 0,
        login: 6,
      },
      {
        headUrl: 'https://www.itying.com/images/flutter/list3.jpg',
        content: `因嫌纱帽小，致使锁枷扛，昨怜破袄寒，今嫌紫蟒长。
          乱烘烘你方唱罢我登场，反认他乡是故乡。甚荒唐，到头来都是为他人作嫁衣裳！`,
        imgs: [
          {url: 'https://www.itying.com/images/flutter/list3.jpg'},
          {url: 'https://www.itying.com/images/flutter/list4.jpg'},
        ],
        distance: 4,
        login: 1,
      }];
    let offsetY = e.nativeEvent.contentOffset.y; //滑动距离
    let contentSizeHeight = e.nativeEvent.contentSize.height; //scrollView 和 contentSize高度
    let oriageScrollHeight = e.nativeEvent.layoutMeasurement.height; //scrollView高度

    // 距离底部高度
    let bottomH = contentSizeHeight - (offsetY + oriageScrollHeight);
    if (bottomH < pxToDp(50)){
      if (isLoading) return;
      // 防止多次底部刷新
      this.setState({
        isLoading: true
      });

      let newData = [...listData, ...addData];
      this.timeId = setTimeout(()=>{
        this.setState({
          listData: newData,
          isLoading: false
        })
      },1000)
    }


  }
}

export default Trend;